<template>
	<view>

		<view class="title">

			<view class="brand flex align-center justify-center">
				<view class="brnad-item flex justify-start align-center">
					<view class="item flex align-center flex-direction">
						<text class="text1">
							全部收入
						</text>
						<text class="text2">
							2500
						</text>
					</view>
					<text class="brand-text"></text>
					<view class="item  flex align-center flex-direction">
						<text class="text1">
							未结算
						</text>
						<text class="text2">
							500
						</text>
					</view>
					<text class="brand-text"></text>
					<view class="item  flex align-center flex-direction">
						<text class="text1">
							已结算
						</text>
						<text class="text2">
							2000
						</text>
					</view>
				</view>
			</view>
			
			<view class="title-text flex align-center justify-center">
				
				<text class="text1" @click="jump('applySettlement')">
					申请结算
				</text>
				<text class="text2" @click="jump('incomeDetails')">
					收入明细
				</text>
				<text class="text3" @click="jump('orderDetails')">
					订单明细
				</text>
			</view>

		</view>
		
		<!-- 数据列表 -->
		<view class="tab-title flex">
			<view class="item1">
				申请时间
			</view>
			<view class="item2">
				结算金额
			</view>
			<view class="item3">
				状态
			</view>
			<view class="item4">
				操作
			</view>
		</view>
		
		<view class="num-title flex" v-for="(item,index) in 6" :key="index">
			<view class="item1">
				2020-12-12
			</view>
			<view class="item2">
				$88
			</view>
			<view class="item3">
				待审核
			</view>
			<view class="item4">
				<text class="text">已到账</text>
				<text class="text">再次提交</text>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			jumpApply() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.distribution.applyingPartner,
					query: {
						a: 1
					}
				})
			},
			jump(item){
				let routeJump;
				console.log(item,'这个是路由跳转字段')
				switch (item) {
					// 跳转申请结算
					case 'applySettlement':
						routeJump = this.$mRoutesConfig.distribution.applySettlement
						break;
					// 跳转收入明细
					case 'incomeDetails':
						routeJump = this.$mRoutesConfig.distribution.incomeDetails
						break;
					// 跳转订单明细
					case 'orderDetails':
						routeJump = this.$mRoutesConfig.distribution.orderDetails
						break;
				}
				
				this.$mRouter.push({
					route: routeJump,
					query: {
						a: 1
					}
				})
				
				
				
			}


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}
	.num-title{
		height:100rpx;
		border-bottom: 1rpx solid #eee;
		background-color: white;
		view{
			text-align: center;
			height:100rpx;
			line-height: 100rpx;
			font-size: 24rpx;
			color:#999999;
		}
		.item1{
			flex:1;
		}
		.item2{
			flex:1;
		}
		.item3{
			flex:1;
		}
		.item4{
			flex:2;
			.text{
				display: inline-block;
				height:50rpx;
				padding:0 16rpx;
				line-height: 50rpx;
				background: #d4237a;
				border-radius: 16rpx;
				color:white;
				margin:0 10rpx;
				font-size: 24rpx;
			}
		}
	}
	
	.tab-title{
		height:100rpx;
		border-bottom: 1rpx solid #eee;
		background-color: white;
		margin-top: 32rpx;
		view{
			text-align: center;
			height:100rpx;
			line-height: 100rpx;
		}
		.item1{
			flex:1;
		}
		.item2{
			flex:1;
		}
		.item3{
			flex:1;
		}
		.item4{
			flex:2;
		}
	}

	.title {
		width: 750rpx;
		padding-top: 36rpx;
		
		.title-text{
			text{
				display: inline-block;
				width:160rpx;
				height:60rpx;
				background: #d4237a;
				color:white;
				text-align: center;
				line-height: 60rpx;
				border-radius: 28rpx;
				margin: 0 24rpx;
			}
		}

		// 严选品牌，收录品牌
		.brand {
			width: 750rpx;
			height: 158rpx;

			.brnad-item {
				width: 686rpx;
				height: 158rpx;

				.brand-text {
					display: inline-block;
					width: 2rpx;
					height: 68rpx;
					background: #B6B6B6;
					border-radius: 3rpx;
				}

				.item {
					flex: 1;
					height: 158rpx;
					padding-top: 36rpx;

					.text1 {
						display: inline-block;
						font-size: 32rpx;
						color: #666666;
						line-height: 36rpx;
						margin-bottom: 12rpx;
					}

					.text2 {
						display: inline-block;
						font-size: 38rpx;
						line-height: 40rpx;
						color:#d4237a;
					}
				}
			}

		}






	}
</style>
